<template>
	<view class="content">
		<scroll-view class="header" :style="{background:$store.state.bgPrimaryColor}" scroll-x="true" scroll-left="0">
			<block v-for="(item,index) in columns" :key="index">
				<text :style="{'border-bottom':index == inx ? `3px solid ${$store.state.primaryColor}` : `3px solid transparent`,
				'color':index == inx ? $store.state.primaryColor : '#4C4C4C'}" @click="getActive(index)">{{item.label}}</text>
			</block>
		</scroll-view>
		<view class="Box" v-if="lists.length > 0">
			<view v-for="(item,index) in lists" :key="index">
				<view class="BoxView">
					<view class="BoxOne">
						<view style="display: flex;align-items: center;">
							<u--image :showLoading="true" :src="item.teacher.avatar" width="94rpx" height="94rpx"
								radius="0" shape="circle" v-if="item.teacher"></u--image>
							<u--image :showLoading="true" src="../../static/avatar.png" width="94rpx" height="94rpx"
								radius="0" shape="circle" v-else></u--image>
							<view class="BoxContent">
								<view class="BoxTop marginBottom">
									<text class="title">{{item.teacher ? item.teacher.name : ''}}</text>
									<text
										style="color:#888888;margin-left:15rpx;">{{item.teacher ? item.teacher.country.name : ''}}教师</text>
								</view>
								<view class="BoxTop">
									<text class="Newtitle">{{item.teacher ? item.teacher.speciality : ''}}</text>
								</view>
							</view>
						</view>
						<button class="cancel" @click="cancel(item)" v-if="item.status_text == '预约中' && item.type == 2"
							:style="{'background':$store.state.buttonColor,'white-space': 'nowrap'}">预约取消</button>
						<button class="cancel"
							@click="linkUrl(`/pages/Teacher/Publish_comments?teacher_id=${item.teacher_id}&shop_id=${item.shop_id}&order_id=${item.order_id}&reservation_id=${item.id}`)"
							v-if="item.status_text == '已结束' && item.comment_status== 1"
							:style="{'background':$store.state.buttonColor,'white-space': 'nowrap'}">待评价</button>
					</view>
					<view class="BoxBottom">
						<text class="title">{{item.name}}</text>
						<view class="TimeFlex">
							<text class="TimeTitle">距离课程开始</text>
							<uni-countdown color="#F1330D" background-color="#FFB5B5" :day="item.time.days"
								:hour="item.time.hours" :minute="item.time.minutes" :second="item.time.seconds"
								v-if="item.status_text == '预约中'" />
							<text style="width: 130px;" v-else></text>
							<text
								style="font-size:26rpx;margin-left:80rpx;white-space: nowrap;">{{item.type == 2 ? '1v1固定课程' : '1v2固定课程'}}</text>
							<!-- 				<u-count-down :time="item.time * 1000" format="HH:mm:ss" autoStart millisecond
							@change="onChange">
							<view class="time">
								<view class="time__custom">
									<text
										class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
								</view>
								<text class="Timetext">小时</text>
								<!-- <text class="time__doc">:</text> -->
							<!-- 						<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes }}</text>
								</view>
								<text class="Timetext">分</text>
								<!-- <text class="time__doc">:</text> -->
							<!-- 							<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds }}</text>
								</view>
								<text class="Timetext">秒</text>
							</view>
						</u-count-down> -->
						</view>
						<view class="Boxinfo">
							<view class="u-Flex">
								<u--image :showLoading="true" src="../../static/Home/rqi.png" width="26rpx"
									height="26rpx" radius="0"></u--image>
								<text>{{item.date}}</text>
								<text>{{getday(item.date)}}</text>
							</view>
							<view class="u-Flex">
								<u--image :showLoading="true" src="../../static/Home/shijian.png" width="28rpx"
									height="28rpx" radius="0"></u--image>
								<text>{{item.start_time}}-{{item.end_time}}</text>
							</view>
							<!-- 						<view class="u-Flex">
							<u--image :showLoading="true" src="../../static/Home/cishu.png" width="24rpx" height="24rpx" radius="0"
								></u--image>
							<!-- <text>1次/{{item.vip.total-item.vip.usage}}次</text>
						</view> -->
						</view>
						<!-- <u-line-progress :percentage="1/(item.vip.total-item.vip.usage) *100" height="15" :activeColor="$store.state.primaryColor"></u-line-progress> -->
					</view>
				</view>
				<view class="checkTx" @click="huiyi(item.teacher_id)" style="margin-bottom:0rpx;">
					<text class="checkTx_title">老师腾讯会议号</text>
					<view class="checkTx_view">
						<text class="checkTx_Text">查看会议号与密码</text>
						<u--image :showLoading="true" src="../../static/more.png" width="34rpx" height="34rpx"
							radius="0"></u--image>
					</view>
				</view>
				<view class="checkTx" v-if="item.is_teacher_comment == 1"
					@click="linkUrl(`/pages/Mine/MyCourseReport?id=${item.id}`)" style="margin-top:0rpx;">
					<text class="checkTx_title">老师评价</text>
					<view class="checkTx_view">
						<text class="checkTx_Text">查看本节课报告</text>
						<u--image :showLoading="true" src="../../static/more.png" width="34rpx" height="34rpx"
							radius="0"></u--image>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="arr == 2 && lists.length != 0" style="font-weight: 600;
	text-align: center;margin-top: 30rpx;"> 加载完毕... </view>
		<view class="empty" v-if="lists.length == 0">
			<image src="../../static/null.png" mode="widthFix"></image>
			<text>暂时没有课程</text>
		</view>
		<u-popup :show="isShow" @close="isShow = false" @open="isShow = true" mode="center" round="20">
			<view class="NewpopupBody">
				<text class="title">确定取消预约吗？</text>
				<view class="but_flex">
					<button class="leftButton" @click="isShow = false"
						:style="{'background':$store.state.cancelColor}">取消</button>
					<button class="rightButton" @click="clearReservation()"
						:style="{'background':$store.state.buttonColor}">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		getUserCourse,
		clearReservation
	} from '../../api/Course.js';
	import uniCountdown from '@/uni_modules/uni-countdown/uni-countdown/components/uni-countdown/uni-countdown.vue';
	export default {
		components: {
			uniCountdown
		},
		data() {
			return {
				id: 0,
				isShow: false,
				timeData: {},
				datetimeShow: false,
				value1: Number(new Date()),
				inx: 0,
				// {
				// 	label: '上课中',
				// 	id: 2
				// },
				columns: [{
					label: '预约中',
					id: 1
				}, {
					label: '已结束',
					id: 3
				}, {
					label: '已取消',
					id: -1
				}],
				req: {
					shop_id: 0,
					limit: 999,
					page: 1,
					date: '',
					type: 1,
					reservation_type: '', //预约状态，0=取消,1=预约中，2上课中
				},
				lists: [],
				time: 0,
				hour: '',
				minute: '',
				miao: '',
				day: '',
				hasMore: true,
				arr: 0,
			}
		},
		onReachBottom() {
			if (this.hasMore) {
				this.req.page += 1;
				this.getUserCourse(1);
			}
		},
		methods: {
			getday(time) {
				const targetDate = new Date(time);
				const dayOfWeek = targetDate.getDay();
				const daysOfWeekChinese = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				const currentDayOfWeekChinese = daysOfWeekChinese[dayOfWeek];
				return currentDayOfWeekChinese;
			},
			onUnload() {
				uni.navigateTo({
					url: 'pages/Tabbar/Mine/Mine'
				});
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			},
			getActive(index) {
				this.inx = index;
				this.req = {
					...this.req,
					...{
						reservation_type: this.columns[index].id
					}
				};
				this.req.page = 1;
				this.getUserCourse();
			},
			timestampToYearMonth(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从0开始，需要加1
				return `${year}-${month < 10 ? '0' : ''}${month}`;
			},
			confirmDatetime(e) {
				this.req = {
					...this.req,
					...{
						month_date: this.timestampToYearMonth(e.value)
					}
				};
				this.columns[1].label = this.timestampToYearMonth(e.value);
				this.datetimeShow = false;
				this.getUserCourse();
			},
			confirm(e) {
				this.req = {
					...this.req,
					...{
						reservation_type: e.value[0].id,
						reservation_Name: e.value[0].label
					}
				};
				this.columns[0].label = e.value[0].label;
				this.show = false;
				this.getUserCourse();
			},
			chengIn() {
				let date = new Date();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				this.day = date.getDate().toString().padStart(2, '0');
				this.hour = date.getHours().toString().padStart(2, '0');;
				this.minute = date.getMinutes().toString().padStart(2, '0');;
				this.miao = date.getSeconds().toString().padStart(2, '0');;
			},
			onLoad(options) {
				if (options.hasOwnProperty('current')) {
					this.inx = options.current || 0;
					this.req.reservation_type = options.current || '';
				} else {
					this.req.reservation_type = 1;
				}
				this.req.shop_id = uni.getStorageSync('shop_id') || 1;
				this.getUserCourse()
			},
			onChange(e) {
				// /console.log(e)
				this.timeData = e
			},
			cancel(item) {
				this.isShow = true;
				this.id = item.id
			},
			huiyi(e) {
				uni.navigateTo({
					url: 'Appointment_number?teacher_id=' + e
				});
			},
			getSecondsDifference(targetTime) {
				// 将目标时间转换为Date对象
				const targetDate = new Date(targetTime);
				// 获取当前时间
				const currentDate = new Date();
				// 计算时间差（毫秒级）
				const difference = targetDate - currentDate;
				console.log(currentDate)
				console.log(targetDate)
				// 将时间差转换为秒
				const secondsDifference = Math.floor(difference / 1000);
				return secondsDifference > 0 ? secondsDifference : 0;
			},
			timeUntil(endTime) {
				let systemInfo = uni.getSystemInfoSync();
				let platform = systemInfo.platform;
				const now = new Date();
				if (platform === 'android') {
					var end = new Date(endTime);
				} else if (platform === 'ios') {
					var end = new Date(endTime.replaceAll("-", "/"));
				} else {
					var end = new Date(endTime);
				}
				const diff = end.getTime() - now.getTime(); // 时间差（毫秒）
				// 如果 endTime 已经过去，返回 0
				if (diff < 0) {
					return {
						days: 0,
						hours: 0,
						minutes: 0,
						seconds: 0
					};
				}
				// 计算差值的天、小时、分钟和秒
				let days = diff / (1000 * 60 * 60 * 24);
				days = Math.floor(days);
				let hours = (diff - (days * 1000 * 60 * 60 * 24)) / (1000 * 60 * 60);
				hours = Math.floor(hours);
				let minutes = (diff - (days * 1000 * 60 * 60 * 24) - (hours * 1000 * 60 * 60)) / (1000 * 60);
				minutes = Math.floor(minutes);
				let seconds = (diff - (days * 1000 * 60 * 60 * 24) - (hours * 1000 * 60 * 60) - (minutes * 1000 * 60)) /
					1000;
				seconds = Math.floor(seconds);
				return {
					days,
					hours,
					minutes,
					seconds
				};
			},
			async getUserCourse(e) {
				let req = {
					...this.req,
					...{
						type: 1
					}
				}
				try {
					const res = await getUserCourse(req);
					res.data.data.forEach(item => {
						item.time = this.timeUntil(item.date + ' ' + item.start_time)
					});
					if (res.data.data.length < this.req.limit) {
						this.arr = 2
						this.hasMore = false;
					}
					if (e === 1) {
						this.lists = [...this.lists, ...res.data.data];
					} else {
						this.lists = res.data.data;
					}
					console.log(res.data.data)
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			async clearReservation() {
				try {
					let ids = this.id
					let shop_id = this.req.shop_id
					const res = await clearReservation({
						id: ids,
						shop_id: shop_id
					});
					this.isShow = false
					if (res.code == 1) {
						uni.showToast({
							title: '取消成功',
							icon: 'none',
							duration: 2000
						});
					}
					this.getUserCourse()
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f6f7f9;
	}
</style>
<style scoped lang="scss">
	button::after {
		border: none;
	}

	.content {
		/deep/ .u-safe-bottom {
			display: none;
		}

		.NewpopupBody {
			width: 550rpx;
			height: auto;
			padding-top: 50rpx;
			padding-bottom: 50rpx;
			background-color: transparent;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				display: block;
				text-align: center;
			}

			.content_text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				display: block;
				text-align: center;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				letter-spacing: 2rpx;
			}

			.but_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 50rpx;

				.leftButton {
					width: 40%;
					height: 70rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					background-color: #efefef;
				}

				.rightButton {
					width: 40%;
					height: 70rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					// background-color:#267fff;
				}
			}
		}

		.empty {
			image {
				width: 100%;
			}

			text {
				display: block;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
			}
		}

		.header {
			width: 100%;
			white-space: nowrap;
			padding: 10rpx 0rpx 0rpx 20rpx;

			text {
				border-bottom: 3px solid transparent;
				padding-bottom: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				display: inline-block;
				margin-right: 100rpx;
			}

			/deep/ .u-image {
				margin-top: -25rpx;
			}
		}

		.Box {
			.BoxView {
				width: 85%;
				margin: 0px auto;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx 40rpx 30rpx 40rpx;
				margin-top: 20rpx;
			}

			.BoxOne {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 25rpx;
				border-bottom: 1px solid #F2F2F2;

				.marginBottom {
					margin-bottom: 10rpx;
				}

				.BoxTop {
					margin-left: 20rpx;
					display: flex;
					align-items: center;

					text {
						display: block;
						font-size: 24rpx;
					}

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						font-style: normal;
					}

					.Newtitle {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						font-style: normal;
					}
				}
			}

			button {
				width: 154rpx;
				height: 60rpx;
				background: linear-gradient(270deg, #3078FF 0%, #009DFE 100%);
				border-radius: 46rpx;
				margin: 0px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 26rpx;
			}
		}

		.BoxBottom {
			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				margin-top: 25rpx;
				margin-bottom: 10rpx;
				display: block;
			}

			.TimeFlex {
				display: flex;
				align-items: center;

				.TimeTitle {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					margin-right: 10rpx;
				}
			}

			.Boxinfo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 25rpx;
				margin-bottom: 25rpx;

				.u-Flex {
					display: flex;
					align-items: center;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						margin-left: 5rpx;
					}
				}
			}

			.time {
				@include flex;
				align-items: center;

				.Timetext {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #F1330D;
					margin-left: 5rpx;
					margin-right: 5rpx;
				}

				.time__doc {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #F1330D !important;
				}

				&__custom {
					// margin-top: 4px;
					width: 20px;
					height: 20px;
					background-color: #ffb1b0;
					border-radius: 4px;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					justify-content: center;
					align-items: center;

					&__item {
						color: #F1330D !important;
						font-size: 12px;
						text-align: center;
					}
				}

				&__doc {
					color: $u-primary;
					padding: 0px 4px;
				}

				&__item {
					color: #606266;
					font-size: 15px;
					margin-right: 4px;
				}
			}
		}

		.checkTx {
			width: 88%;
			padding: 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0px auto;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.checkTx_title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
			}

			.checkTx_view {
				display: flex;
				align-items: center;

				.checkTx_Text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #888888;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>